<template>
  <EvModal
    v-model="visible"
    :config="{
      options: { title: '选择栏目', showFooter: true, width: '500px', height: '400px' },
      events: {},
    }"
  >
    <template #default>
      <n-tree
        class="h-full overflow-auto"
        block-line
        :data="channelTree"
        key-field="id"
        :cancelable="false"
        label-field="channelName"
        v-model:selected-keys="channelValue"
      />
    </template>
    <template #footer>
      <n-space class="float-right">
        <n-button @click="visible = false">取消</n-button>
        <n-button type="primary" @click="submitFn">确定</n-button>
      </n-space>
    </template>
  </EvModal>
</template>

<script setup>
import { computed, ref } from 'vue';
import { dataToTree } from '@/utils/index.js';
import { API_getTreeByCode } from '@/api/app/index.js';

const props = defineProps({
  modelVisible: {
    type: Boolean,
    default: false,
  },
});

// 自定义组件双向绑定
const emits = defineEmits(['update:modelVisible', 'update:channelValue', 'submitFn']);
const visible = computed({
  get: () => props.modelVisible,
  set: (newV) => {
    emits('update:modelVisible', newV);
  },
});

const channelTree = ref([]);
const channelValue = ref([]);
function getChannelTree() {
  API_getTreeByCode({ code: 'channel' }).then((res = []) => {
    channelTree.value = dataToTree(res, 'pid', 'id', '1000000000000000000');
  });
}
getChannelTree();
function submitFn() {
  emits('submitFn', channelValue.value);
}
</script>

<style scoped lang="scss"></style>
